<template>
	<view class="content-container" @click="GotoDetail()">
		<view class="article-card">
			<view class="article-header">
				<view class="title">
					<text>Ubuntu 18.04 优化</text>
				</view>
				<view class="subtitle">
					<text>系统优化指南</text>
				</view>
				<view class="meta-info">
					<view class="date-container">
						<image src="/static/calender.png" mode="aspectFit" class="icon"></image>
						<text class="date">2023年5月19日</text>
					</view>
					<view class="tags-container">
						<view v-for="(tag, index) in tags" :key="index" class="tag">{{tag}}</view>
					</view>
				</view>
			</view>
			<view class="article-content">
				<view class="article-image">
					<image src="/static/logo.png" mode="aspectFill" class="feature-image"></image>
				</view>
				<view class="article-text">
					<text class="text-content">Ubuntu 相关软件(内网访问) >>> 软件： Double commander 一款很好的文件管理器，类似TC的免费开源的资源管理器软件。开源免费，跨平台。方便文件管理与拷贝，如向U盘的文件复制。</text>
					<text class="code-block">$sudo apt-get install doublecmd-qt</text>
					<text class="text-content">其他推荐软件：oh my zsh : 终极Shell</text>
					<view class="steps">
						<text class="step">(1) 安装 zsh</text>
						<text class="step">(2) 安装 git</text>
						<text class="step">(3) 安装 oh my zsh</text>
					</view>
					<view class="read-more">
						<text class="read-more-text">阅读更多</text>
						<image src="/static/more.png" mode="aspectFit" class="arrow-icon"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"content",
		data() {
			return {
				tags: ["优化", "Ubuntu", "Linux"]
			};
			
		},
		methods:
		{
			GotoDetail()
			{
				uni.navigateTo({
					url:'/pages/contentdetail/contentdetail'
				})
			}
			
		}
	}
</script>

<style>
.content-container {
	padding: 30rpx 0;
}

.article-card {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition: transform 0.3s ease;
}



.article-header {
	padding: 40rpx 40rpx 20rpx 40rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.title {
	font-size: 44rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 16rpx;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 24rpx;
}

.meta-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.date-container {
	display: flex;
	align-items: center;
}

.icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
}

.date {
	font-size: 26rpx;
	color: #888;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
}

.tag {
	padding: 6rpx 20rpx;
	background-color: #f0f7ff;
	color: #4a6572;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin-right: 16rpx;
	margin-bottom: 10rpx;
}

.article-content {
	display: flex;
	padding: 40rpx;
}

.article-image {
	flex: 0 0 300rpx;
	margin-right: 40rpx;
}

.feature-image {
	width: 300rpx;
	height: 300rpx;
	border-radius: 8rpx;
	object-fit: cover;
}

.article-text {
	flex: 1;
}

.text-content {
	font-size: 30rpx;
	line-height: 1.8;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.code-block {
	display: block;
	background-color: #f5f7f9;
	border-left: 8rpx solid #4a6572;
	padding: 20rpx;
	font-family: 'Courier New', monospace;
	font-size: 28rpx;
	color: #333;
	margin: 30rpx 0;
	border-radius: 0 8rpx 8rpx 0;
}

.steps {
	margin: 30rpx 0;
}

.step {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	padding-left: 20rpx;
	border-left: 4rpx solid #e0e0e0;
}

.read-more {
	margin-left: 40rpx;
	display: flex;
	align-items: center;
	margin-top: 40rpx;
}

.read-more-text {
	color: #4a6572;
	font-size: 28rpx;
	font-weight: 600;
}
.read-more-text:hover
{
	color: #26343b;
}
.arrow-icon {
	width: 24rpx;
	height: 24rpx;
	margin-left: 10rpx;
}
</style>